<template>
<div>
    <!-- 面包屑导航 -->
    <div class="bread">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>宿舍学生信息管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div style="width:95%; height: 90%;border: 1px solid #eee;background-color: white; text-align: center;">
         <div style="border:1px solid #eee; vertical-align:middle; line-height: 50px;">
             <span style=" font-size: 17px;">学生信息记录</span>
             <el-button size="small" type="button" @click="dialogVisible = true" style="height: 35px;margin-left: 70%;background-color:#409eff;color: azure;border: 0;" icon="el-icon-plus">添加学生</el-button>

         </div>
         <!-- 添加端 -->
         <el-dialog 
         title="添加学生信息" 
         :visible.sync="dialogVisible"
        
         >
            <el-form  rel="form" label-width="140px" :label-position="left" >
                
                <el-form-item label="学号" prop="perno">
                    <el-input placeholder="请输入学号" clearable></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="pername">
                    <el-input type="text" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="persex">
                    <el-select type="text" placeholder="请输入性别">
                        <el-option
                    v-for="item in options"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                        ></el-option>
                    
                    </el-select>
                </el-form-item>
                
                <el-form-item label="楼栋号" prop="floorno">
                    <el-input type="text" placeholder="请输入楼栋号" clearable></el-input>
                </el-form-item>
                <el-form-item label="宿舍号" prop="dormno">
                    <el-input type="text" placeholder="请输入宿舍号" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phonenum">
                    <el-input type="text" placeholder="请输入号码" clearable></el-input>
                </el-form-item>
                <el-form-item label="院系" prop="department">
                    <el-input type="text" placeholder="请输入学院" clearable></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="peofessional">
                    <el-input type="text" placeholder="请输入专业" clearable></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="classnum">
                    <el-input type="text" placeholder="请输入班级" clearable></el-input>
                </el-form-item>
                <el-form-item style="margin-left:300px">
                    
                    <el-button type="primary" style="float:left; background:white;color: black;" @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" style="float:left" @click="addstu">
                        确认添加
                    </el-button>
                </el-form-item>
               
            </el-form>
         </el-dialog>
         <el-main>
             <el-table :data="stuTableData" height="370" stripe border>
                 <el-table-column prop="perno" label="学号" width="100">
                 </el-table-column>
                 <el-table-column prop="pername" label="姓名" width="100">
                 </el-table-column>
                 <el-table-column prop="persex" label="性别" width="80">
                 </el-table-column>
                 <el-table-column prop="floorno" label="楼栋号" width="90">
                 </el-table-column>
                 <el-table-column prop="dormno" label="宿舍号" width="90">
                 </el-table-column>
                 <el-table-column prop="phonenum" label="联系电话" width="140">
                 </el-table-column>
                 <el-table-column prop="department" label="院系" width="150">
                 </el-table-column>
                 <el-table-column prop="peofessional" label="专业" width="110">
                 </el-table-column>
                 <el-table-column prop="classnum" label="班级" width="80">
                 </el-table-column >
                <el-table-column label="操作" width="170">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)"  type="primary" size="small" style="color:azure; background-color:#409eff;">修改</el-button>
                        <el-button @click="handleDelete(scope.row.perno)" type="danger" size="small" style="color:azure;background-color:lightcoral">删除</el-button>
                    </template>
                </el-table-column>
             </el-table>
            
         </el-main>
         <br>
         <br>
         <footer>
             <el-pagination
             background
             layout="prev,pager,next,total,sizes"
             :total="50"
             :jumper="5"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-size="100"
             style="margin-left:400px">
             </el-pagination>
         </footer>
    </div>
        </div>
 </template>
 <script>
import axios from 'axios';

 export default {
     data() {
        return{
        stuTableData:[],
           currentPage:4,
           dialogVisible:false,
           options: [
                { label: '男', value: 1 },
                { label: '女', value: 2 },
                ],
        }
     },
    //获取数据
    created(){
        axios.get('http://127.0.0.1/user').then((res)=>{
            const {data}=res;
            this.stuTableData = data;
        })
    },

     // 操作数据
     methods:{
        //分页
            handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
          //修改
         handleEdit:function(){
            axios.get('http://127.0.0.1/list/handleEdit',{
                params:{
                        perno:this.perno,
                        pername:this.pername,
                        persex:this.persex,
                        floorno:this.floorno,
                        dormno:this.dormno,
                         phonenum:this.phonenum,
                        department:this.department,
                        peofessional:this.peofessional,
                        classnum:this.classnum,
                }
            }).then(res=>{
                if(res.data.status ==200){
                    this.created()
                    this.$message({
                        message:'修改成功',
                        type:'sucess'
                    });
                }
            }).catch(err=>{
                console.log('操作失败'+err);
            })
           this.dialogVisible=true
         },
            //添加
         addstu:function(){
            axios.get('http://127.0.0.1/list/addstu',{
                params: {
                    perno:this.perno,
                    pername:this.pername,
                    persex:this.persex,
                    floorno:this.floorno,
                    dormno:this.dormno,
                    phonenum:this.phonenum,
                    department:this.department,
                    peofessional:this.peofessional,
                    classnum:this.classnum,
                }
      }).then(res=>{
        if(res.data.status ==200){
            this.created()
            this.$message({
                message:'添加成功',
                type:'success'
            });
        }
      }).catch(err=>{
        console.log('操作失败'+err);
      })
          
         },
        //删除
         handleDelete(perno){
                    this.stuTableData.forEach(item => {
                        delete item.perno
                    });
                    axios.get('http://127.0.0.1/list/handleDelete',{params:{perno}
                    }).then(res=>{
                        console.log(res.data);
                        this.$message({
                            message:'删除成功',
                            type:'success'
                        })
                    }).catch(err=>{
                        console.log('操作失败'+err);
                    })
                    //刷新
                    history.go(0)
                 },
       
     },
 };
 
 </script>
 <style>
 
 #addstu{
            width:500px;
             display: none; 
             position: absolute; 
             top: 20%; 
             left: 25%; 
             width: 55%; 
             height: 60%; 
             padding: 20px; 
             border: 10px solid #409eff; 
             background-color: white; 
             z-index:1002; 
             overflow: auto; 
         }
.bread{
    margin-left: -20px;
    margin-top: -20px;
    width: 100%;
    height: 40px;
}
 </style>
 
 